<template>
  <div class="form-design">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="100%"
      top="0px"
      destroy-on-close
      :close-on-click-modal="false"
      @closed="$emit('closed')"
      :modal="false"
    >
      <div id="app">
        <avue-form-design
          style="height: 100vh"
          :options="form.form_json"
          @submit="handleSubmit"
          :custom-fields="customFields"
          :default-values="defaultValues"
        ></avue-form-design>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "designer",
  data() {
    return {
      title: "flyWhale",
      visible: false,
      defaultValues: {},
      customFields: [],
      form: {
        form_json: {},
        title: "",
        status: "",
        table: "",
        id: "",
      },
    };
  },
  methods: {
    open() {
      this.visible = true;
      return this;
    },
    setData(row) {
      this.form.id = row.id;
      this.form.title = row.title;
      this.form.status = row.status;
      this.form.table = row.table;
      this.form.now_version = row.now_version + 1; // 版本+1
      if (row.form_json) {
        this.form.form_json = JSON.parse(row.form_json);
      }
    },
    closeDialog() {
      this.visible = false;
      this.$emit("closed");
    },
    async handleSubmit(val) {
      this.form.form_json = val;
      let res = await this.$api.form.edit.post(this.form);
      if (res.code == 0) {
        this.$message.success("保存成功");
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style>
.form-design .el-dialog__body {
  padding: 0;
}
</style>
